<template>
  <div class="report-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>举报投诉</span>
        </div>
      </template>

      <!-- 标签页 -->
      <el-tabs v-model="activeTab" class="demo-tabs">
        <el-tab-pane label="商品" name="product">
          <!-- 商品举报列表 -->
          <div class="report-list">
            <div
              v-for="(product, index) in reportedProducts"
              :key="index"
              class="report-item"
            >
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-image
                    :src="product.images"
                    fit="cover"
                    style="width: 100%; height: 100px; border-radius: 4px"
                  />
                </el-col>
                <el-col :span="10">
                  <div class="product-name">商品名称：{{ product.title }}</div>
                  <div class="product-price">商品金额：¥{{ product.price }}</div>
                  <div class="report-type">举报类型：{{ getLabelById(product.reportType) }}</div>
                  <div class="report-reason">举报原因: {{ product.content }}</div>
                </el-col>
                <el-col :span="6" class="rightList">
                  <div class="None">&nbsp;</div>
                  <div class="None">&nbsp;</div>
                  <div class="report-time">举报时间：{{ product.createdAt }}</div>
                  <div class="report-status">举报状态：{{ geStatusById(product.status) }}</div>
                </el-col>
              </el-row>
              <el-divider />
            </div>

            <div v-if="reportedProducts.length === 0" class="empty-tips">
              暂无举报商品
            </div>
          </div>
        </el-tab-pane>
<!-- 用户举报列表 -->
        <!-- <el-tab-pane label="用户" name="user">
          
          <div class="report-list">
            <div v-for="(user, index) in reportedUsers" :key="index" class="report-item">
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-avatar :size="60" :src="user.avatar" />
                </el-col>
                <el-col :span="16">
                  <div class="user-name">{{ user.nickname }}</div>
                  <div class="report-reason">举报原因: {{ user.reportReason }}</div>
                </el-col>
                <el-col :span="2">
                  <el-button type="primary" size="small" @click="handleUserAction(user)"
                    >处理</el-button
                  >
                </el-col>
              </el-row>
              <el-divider />
            </div>

            <div v-if="reportedUsers.length === 0" class="empty-tips">暂无举报用户</div>
          </div>
        </el-tab-pane> -->
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref,onMounted } from "vue";
import { ElMessage } from "element-plus";
import { userInfoStore } from "@/stores/user.js";
import {getReportByUserId} from "@/apis/report.js";
import { complaintOptions,statusOptions } from "@/apis/options";
const getLabelById = (id) => {
  const option = complaintOptions.find(item => item.id === id)
  console.log("举报类型",option)
  return option ? option.label : '未知'
}
const geStatusById = (id) => {
  const option = statusOptions.find(item => item.id === id)
  return option ? option.label : '未知'
}
//获取数据
const getReportList = async (id) => {
 // console.log("用户id", id);
 //获取列表
 const res = await getReportByUserId(id);
 reportedProducts.value = res.data;
}
// const userStore = userInfoStore();
onMounted(() =>{
  const userStore = userInfoStore();
  console.log("用户信息--",userStore.userInfo?.userId);
  getReportList(userStore.userInfo?.userId)
})
// 当前选中的标签页
const activeTab = ref("product");

// 模拟商品举报数据
const reportedProducts = ref([]);

// 模拟用户举报数据
//const reportedUsers = ref([
//   {
//     id: 101,
//     nickname: "用户12345",
//     avatar: "https://via.placeholder.com/60x60",
//     reportReason: "恶意评价",
//   },
//   {
//     id: 102,
//     nickname: "用户67890",
//     avatar: "https://via.placeholder.com/60x60",
//     reportReason: "发布违规内容",
//   },
// ]);

// // 处理商品举报
// const handleProductAction = (product) => {
//   ElMessage.success(`正在处理商品举报: ${product.name}`);
//   // 这里可以添加实际的处理逻辑
// };

// // 处理用户举报
// const handleUserAction = (user) => {
//   ElMessage.success(`正在处理用户举报: ${user.nickname}`);
//   // 这里可以添加实际的处理逻辑
// };
</script>

<style scoped lang="scss">
.report-container {
  //   max-width: 1000px;
  margin: 20px auto;
  padding: 20px;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
}
// .rightList {
//   margin-right: 10px;
// }
.report-list {
  margin-top: 20px;
}

.report-item {
  padding: 15px 0;
}

.product-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.product-price {
  color: #ff6700;
  margin-bottom: 5px;
}
.None {
  margin-bottom: 5px;
}
.user-name {
  font-weight: bold;
  margin-bottom: 5px;
}
.report-type {
  color: #999;
  font-size: 14px;
  margin-bottom: 5px;
}
.report-reason {
  color: #999;
  font-size: 14px;
  margin-bottom: 5px;
}
.report-time {
  color: #999;
  font-size: 14px;
  margin-bottom: 5px;
}
.report-status {
  color: #999;
  font-size: 14px;
  margin-bottom: 5px;
}
.empty-tips {
  text-align: center;
  padding: 30px;
  color: #999;
}
</style>
